<template>
  <div class="bgImage h100vh">
    <n-form
      ref="formRef"
      label-placement="left"
      :label-width="80"
      :model="formValue"
      :rules="rules"
    >
      <n-form-item label="账号" path="account">
        <n-input v-model:value="formValue.account" placeholder="输入账号" />
      </n-form-item>
      <n-form-item label="昵称" path="nickname">
        <n-input v-model:value="formValue.nickname" placeholder="输入账号" />
      </n-form-item>
      <n-form-item label="邮箱" path="email">
        <n-input v-model:value="formValue.email" placeholder="输入账号" />
      </n-form-item>
      <n-form-item label="密码" path="password">
        <n-input
          v-model:value="formValue.password"
          type="password"
          show-password-on="click"
          placeholder="输入密码"
        />
      </n-form-item>
      <n-form-item label="密码" path="confirmPassword">
        <n-input
          v-model:value="formValue.confirmPassword"
          type="password"
          show-password-on="click"
          placeholder="确认密码"
        />
      </n-form-item>
      <n-form-item label=" ">
        <div class="width100">
          <n-button class="mb-10" block @click="enroll"> 注册 </n-button>
          <n-button text @click="login"> 登录 </n-button>
        </div>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import {
  NForm,
  NFormItem,
  NInput,
  NButton,
  type FormInst,
  type FormItemRule,
} from "naive-ui";
import { useRouter } from "vue-router";
import {
  type FormCreateUsersEntity,
  createUser as apiCreateUser,
} from "~/api/user";
import {
  accountRule,
  login as apiLogin,
  emailRule,
  passwordRule,
} from "~/api/auth";
useHead({
  title: "注册", //网站标题
});
const router = useRouter();
const formRef = ref<FormInst | null>(null);
const formValue = ref<FormCreateUsersEntity>({
  account: "",
  nickname: "",
  email: "",
  password: "",
  confirmPassword: "",
});
function validatePasswordStartWith(rule: FormItemRule, value: string): boolean {
  return (
    !!formValue.value.password &&
    formValue.value.password.startsWith(value) &&
    formValue.value.password.length >= value.length
  );
}
function validatePasswordSame(rule: FormItemRule, value: string): boolean {
  return value === formValue.value.password;
}
const rules = {
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
    {
      pattern: accountRule,
      message: "用户账号长度大于8,小于16、且不允许特殊字符",
      trigger: "blur",
    },
  ],
  nickname: [
    {
      required: true,
      message: "请输入昵称",
      trigger: "blur",
    },
    {
      min: 1,
      max: 5,
      message: "长度大于1小于5",
      trigger: "blur",
    },
  ],
  email: [
    {
      pattern: emailRule,
      message: "不符合邮箱格式",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: ["input", "blur"],
    },
    {
      pattern: passwordRule,
      message:
        "密码应包含数字、大小写字母、特殊符号中的3类、且长度大于8、小于16、",
      trigger: ["input", "blur"],
    },
  ],
  confirmPassword: [
    {
      required: true,
      message: "请再次输入密码",
      trigger: ["input", "blur"],
    },
    {
      pattern: passwordRule,
      message:
        "密码应包含数字、大小写字母、特殊符号中的3类、且长度大于8、小于16、",
      trigger: ["input", "blur"],
    },
    {
      validator: validatePasswordStartWith,
      message: "两次密码输入不一致",
      trigger: "input",
    },
    {
      validator: validatePasswordSame,
      message: "两次密码输入不一致",
      trigger: ["blur", "password-input"],
    },
  ],
};
const enroll = (e: MouseEvent) => {
  e.preventDefault();
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      const res = await apiCreateUser(formValue.value);

      if (res?.code === 0) {
        const { account, password } = formValue.value;
        apiLogin({ account, password });
      }
    } else {
      naiveui.message.error(errors[0][0].message ?? "表单验证错误");
    }
  });
};
const login = async () => {
  await navigateTo("/login");
};
</script>
<style lang="scss" scoped>
.n-form {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
